'use strict';
import {createElement, Component,render} from 'rax';
import {View,Image,Text,Link,Layout} from 'nuke';
import styles from './index.less';
class TripleImages extends Component {
	constructor() {
		super();
		this.state={
			width:"",
			height:"",
		}
	}
	onLoad(img){
		let width = img.size.naturalWidth;
		let height = img.size.naturalHeight;
			height = (250*height)/width;
			width = 250;
		this.setState({width:width+"rem",height:height+"rem"});
	}
	setText(text){
		if(text){
			return (
				<View style={{width:"750rem",fontSize:"28rem",paddingLeft:"5rem",marginTop:"-48rem",opacity: "0.8",backgroundColor:"rgb(102, 102, 102)"}}>
					<Text style={{
						  fontSize: 28,
						  textOverflow: 'ellipsis',
						  overflow: 'hidden',
						  color: '#FFFFFF',
						  lineHeight: 48,
						  height: 48
						}}>
						{this.props.text}
						</Text>
				</View>
			);
		}else{
			return;
		}
	}
	setImg(link,img){
		if(link){
			return
			(
				<Link href={link}>
					<Image src={img} style={{width:this.state.width,height:this.state.height}} onLoad={this.onLoad.bind(this)}/>
				</Link>
			);
		}else{
			return (<Image src={img} style={{width:this.state.width,height:this.state.height}} onLoad={this.onLoad.bind(this)}/>);
		}
	}
    render() {
        return (
			<Layout.Grid style={{backgroundColor:this.props.setts["bgColor"+this.props.setts.mix]}}>
				<Layout.Col>
					<View style={{width:this.state.width,height:this.state.height,float:"left"}} >
						{this.setImg(this.props.setts["myLink"+this.props.setts.mix],this.props.setts["myPic"+this.props.setts.mix])}
						{this.setText(this.props.setts["myText"+this.props.setts.mix])}
					</View>
				</Layout.Col>
				<Layout.Col>
					<View style={{width:this.state.width,height:this.state.height,float:"left"}} >
						{this.setImg(this.props.setts["myLink1"+this.props.setts.mix],this.props.setts["myPic1"+this.props.setts.mix])}
						{this.setText(this.props.setts["myText1"+this.props.setts.mix])}
					</View>
				</Layout.Col>
				<Layout.Col>
					<View style={{width:this.state.width,height:this.state.height,float:"left"}} >
						{this.setImg(this.props.setts["myLink2"+this.props.setts.mix],this.props.setts["myPic2"+this.props.setts.mix])}
						{this.setText(this.props.setts["myText2"+this.props.setts.mix])}
					</View>
				</Layout.Col>
			</Layout.Grid>
        );
    }
}

export default TripleImages;
